<template>
	<view>
		<!-- 状态栏占位符 隐藏导航条时使用
		<view class="status_bar"> </view>-->
		<view class="pd16_15">
			<view>
				<view class="flex alcenter space">
					<view class="flex alcenter">
						<text style="color: #000;" class="ft16 ftw600 cl-main">{{$t('Last watch')}}</text>
					</view>
					<navigator url="/pages/client/tuan/zjgk">
						<view class="ft14 cl-notice">{{$t('More')}}</view>
					</navigator>
				</view>
				<view class="mt16 flex space">
					<block v-for="(value,key) in newsa" :key="key" v-if="key<3">
						<view class="box pb10" style="width:31%; position: relative; border-radius:20rpx;"
							@click="detail(value.vid,value.mid)">
							<image class="integral-mall-goods" mode="aspectFill" :src="value.img"></image>
							<view class="mt8 plr10 ft14 ftw400 text-center text-over cl-main">{{value.vname}}</view>
						</view>
					</block>

				</view>
			</view>
			<view class="mt24">
				<view class="flex alcenter space">
					<view class="flex alcenter">
						<text style="color: #000;" class="ft16 ftw600 cl-main">{{$t('My watch')}}</text>
					</view>
					<navigator url="/pages/client/tuan/zjgk">
						<view class="ft14 cl-notice">{{$t('More')}}</view>
					</navigator>
				</view>
				<view class="mt16">
					<block v-for="(value,key) in record" :key="key">
						<view @click="detail(value.vid,value.mid)" style="position: relative;"
							class="flex alcenter mb16">
							<image mode="aspectFill" class="tuan-product-l" :src="value.img"></image>
							<view class="tuan-product-r pl15">
								<view style="color: #2E2F33;" class="ft16 ftw600 cl-main text-over2">{{value.vname}}
								</view>
								<view class="mt16">
									<text class="ft14 cl-orange">{{value.dqname}}</text>
								</view>
								<view class="mt16 flex space alcenter">
									<view class="ft14 cl-notice">{{value.mname}}</view>
									<view class="btn-vip-adviser ml15">{{$t('Watch now')}}</view>
								</view>
							</view>
						</view>
					</block>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				newsa: [],
				record: [],
			}
		},
		onShow() {
			let this_ = this
			this.videologGetList()
			this.getList();
			uni.setNavigationBarTitle({
				title: this.$t('tabbar.history')
			});
		},
		methods: {
			async getList() {
				let this_ = this
				let data = {};
				if (uni.getStorageSync("userinfo")) {
					data.uid = uni.getStorageSync("userinfo").id;
				}
				let [err, res] = await this.$httpas.get('/api/video/zuiju', data);
				if (res.data) {
					this.newsa = res.data.new
					// this.record = res.data.record
				}
			},
			async videologGetList() {
				let this_ = this
				let data = {};
				if (uni.getStorageSync("userinfo")) {
					data.uid = uni.getStorageSync("userinfo").id;
				}
				let [err, res] = await this.$httpas.get('/api/video/videolog', data);
				if (res.data) {
					this.record = res.data.rows
				}
			},
			detail(vid, mid) {
				var fxpid = 1
				if (uni.getStorageSync("userinfo")) {
					fxpid = uni.getStorageSync("userinfo").id
				}
				uni.navigateTo({
					url: '/pages/client/tuan/detail?vid=' + vid + '&mid=' + mid + '&fxpid=' + fxpid
				})
			}
		},
	}
</script>

<style>
	.integral-mall-goods {
		width: 100%;
		height: 280rpx;
		background: #F2F2F2;
		border-radius: 16upx;
	}

	.status_bar {
		height: var(--status-bar-height);
		box-sizing: content-box;
	}

	.tuan-product-l {
		width: 150rpx;
		height: 200rpx;
		border-radius: 16rpx;
		background: #F2F2F2;
	}

	.tuan-product-r {
		width: calc(100% - 150rpx);
	}

	.btn-vip-adviser {
		width: 156rpx;
		height: 60rpx;
		border-radius: 30rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 28rpx;
		/* font-weight: 600; */
		background: #FF6600;
		color: #FFFFFF;
	}
</style>